<template>
  <view>
    <uni-popup ref="popup" type="right" :is-mask-click="false">
      <view class="filter-scroll-view">
        <view class="filter-mask" @click="toggle"></view>
        <view>
          <scroll-view class="scroll-view-box" scroll-y="true">
            <u-gap bgColor="#fff" height="20"></u-gap>
            <CuFilterDictLabel
              v-if="showArr.indexOf('progress') > -1"
              title="作业票进度"
              :dict-list="ticketProgressList"
              v-model="searchData.progress"
            />
            <CuFilterDictLabel
              v-if="showArr.indexOf('range') > -1"
              title="查询范围（仅适用项目负责人、监护人）"
              :dict-list="queryRangeList"
              v-model="searchData.filterMyProjectFlag"
              @change="queryRangeChange"
            />

            <view v-if="searchData.filterMyProjectFlag === false" class="ticketCode">
              <cu-cell
                title="项目负责人或监护人"
                required
                link
                :description="searchData.keyword"
                @click="showApprovePicker"
              >
              </cu-cell>
            </view>

            <view v-if="searchData.filterMyProjectFlag === 'code'" class="ticketCode">
              <uni-easyinput
                class="input"
                v-model="searchData.ticketCode"
                placeholder="请输入作业票编号"
              ></uni-easyinput>
            </view>
            <cu-dept-user-select ref="approvePicker" @change="approvePickerChange"></cu-dept-user-select>
            <view v-if="showArr.indexOf('spw-dept') > -1" class="cu-filter-item-container" @click="showDeptPicker">
              <view class="cu-filter-item-title">作业单位</view>
              <view class="cu-filter-item-control" :class="{ placeholder: !searchData.deptId }">
                {{ searchData.deptId ? searchData.deptName : '请选择作业单位' }}
              </view>
            </view>
            <CuFilterDictLabel
              v-if="showArr.indexOf('spw-type') > -1"
              title="作业票类型"
              :dict-list="workTypeList"
              v-model="searchData.workTypeFlag"
            />

            <cu-filter-date-picker
              v-if="showArr.indexOf('spw-date') > -1"
              title="实施开始日期"
              v-model="searchData.spwStartDate"
            />
            <CuFilterDictLabel
              v-if="showArr.indexOf('managerType') > -1"
              title="隐患类型"
              dictType="dbd_manager_type"
              v-model="searchData.managerType"
            />
            <CuFilterDictLabel
              v-if="showArr.indexOf('managerStatus') > -1"
              title="状态"
              :dictList="managerStatusList"
              v-model="searchData.managerStatus"
            />
            <CuFilterDictLabel
              v-if="showArr.indexOf('managerSource') > -1"
              title="隐患来源"
              :dictList="dbdManagerSourceList"
              v-model="searchData.managerSource"
            />
            <CuFilterDictLabel
              v-if="showArr.indexOf('periodUnit') > -1"
              title="排查周期"
              dictType="sys_period_unit"
              v-model="searchData.periodUnit"
            />
            <CuFilterDictLabel
              v-if="showArr.indexOf('riskLevel') > -1"
              title="风险等级"
              dictType="dbd_risk_level"
              v-model="searchData.riskLevel"
            />
            <CuFilterDictLabel
              v-if="showArr.indexOf('checkStatus') > -1"
              title="排查状态"
              dictType="dbd_check_status"
              v-model="searchData.checkStatus"
            />
            <CuFilterDictLabel
              v-if="showArr.indexOf('powerCutStatus') > -1"
              title="作业票进度"
              dictType="spw_electric_status"
              v-model="searchData.status"
            />
            <u-gap bgColor="#F1F1F1" height="5"></u-gap>
            <view class="cu-padding-left-30" v-if="showArr.indexOf('selectUser') > -1">
              <CuUserSelector label="上报人" placeholder="选择人员" :required="false" v-model="searchData.keyword" />
              <CuUserSelector
                label="审核人"
                placeholder="选择人员"
                :required="false"
                v-model="searchData.reviewPersonId"
              />
              <CuUserSelector
                label="整改人"
                placeholder="选择人员"
                :required="false"
                v-model="searchData.chargePersonId"
              />
              <CuUserSelector
                label="验收人"
                placeholder="选择人员"
                :required="false"
                v-model="searchData.acceptancePersonId"
              />
            </view>
            <view v-if="showArr.indexOf('secondAreas') > -1" class="ticketCode">
              <view class="title">分厂</view>
              <uni-data-select
                class="input"
                v-model="searchData.secondFactoryId"
                :localdata="secondAreas"
                placeholder="请选择分厂"
              ></uni-data-select>
            </view>

            <u-gap bgColor="#F1F1F1" height="5"></u-gap>
            <CuFilterTime v-if="showArr.indexOf('selectTime') > -1 && showTime" v-model="searchData.date" />
            <view v-if="showArr.indexOf('ticketCode') > -1" class="ticketCode">
              <view class="title">作业票编号</view>
              <uni-easyinput
                class="input"
                v-model="searchData.ticketCode"
                placeholder="请输入作业票编号"
              ></uni-easyinput>
            </view>
          </scroll-view>
          <view class="btn-wrap">
            <view class="reset" @click="resetHandler">重置条件</view>
            <view class="confirm" @click="submitHandler">搜索</view>
          </view>
        </view>
      </view>
    </uni-popup>
    <cu-tree-select
      ref="deptSelectRef"
      :checkList="deptCheckList"
      :request-api="listDeptChildren"
      label-key="label"
      value-key="id"
      children-key="children"
      @change="onDeptChange"
    />
  </view>
</template>

<script>
import CuCell from '@/components/cu-cell/cu-cell.vue'
import userSelector from '@/components/user-selector/index.vue'
import CuUserSelector from '@/components/CuUserSelector/index.vue'
import CuFilterDictLabel from './components/cu-filter-dict-label.vue'
import CuFilterTime from './components/cu-filter-time.vue'
import { getLevelTwoArea } from '@/api/spw/powerCut.js'
import CuTreeSelect from '@/components/cu-tree-select/cu-tree-select.vue'
import { listDeptChildren } from '@/api/system/dept'
import { getSpecialWorkType } from '@/api/spw/project'
import CuFilterDatePicker from '@/components/cu-filter-ticket/components/cu-filter-datepicker.vue'
import FilterTime from '@/pages/jobSlip/project/components/FilterTime.vue'
import CuDeptUserSelect from '@/components/cu-dept-user-select/cu-dept-user-select.vue'

export default {
  name: 'CuFilter',
  components: {
    CuDeptUserSelect,
    FilterTime,
    CuFilterDatePicker,
    CuTreeSelect,
    CuFilterDictLabel,
    CuUserSelector,
    CuFilterTime,
    CuCell,
    userSelector
  },
  data() {
    return {
      showTime: false,
      show: false,
      deptCheckList: [],
      // 分厂
      secondAreas: [],
      // 作业票类型
      workTypeList: [],
      // 作业票进度
      ticketProgressList: [
        {
          dictLabel: '审查中',
          dictValue: 1
        },
        {
          dictLabel: '执行中',
          dictValue: 3
        },
        {
          dictLabel: '已验收',
          dictValue: 4
        },
        {
          dictLabel: '撤销',
          dictValue: 5
        },
        {
          dictLabel: '作废',
          dictValue: 6
        }
      ],
      // 作业票范围
      queryRangeList: [
        {
          dictLabel: '我的项目',
          dictValue: true
        },
        {
          dictLabel: '自定义',
          dictValue: false
        },
        {
          dictLabel: '编号查询',
          dictValue: 'code'
        }
      ],
      //隐患状态
      managerStatusList: [
        {
          dictValue: 1,
          dictLabel: '待派发'
        },
        {
          dictValue: 2,
          dictLabel: '待审核'
        },
        {
          dictValue: 3,
          dictLabel: '待审批'
        },
        {
          dictValue: 4,
          dictLabel: '待整改'
        },
        {
          dictValue: 5,
          dictLabel: '待验收'
        }
      ],
      //隐患来源
      dbdManagerSourceList: [
        {
          dictLabel: '随手拍',
          dictValue: 1
        },
        {
          dictLabel: '管控排查',
          dictValue: 2
        },
        {
          dictLabel: '报警中心上报',
          dictValue: 3
        },
        {
          dictLabel: '设备预防性维护',
          dictValue: 4
        },
        {
          dictLabel: '隐患排查上报',
          dictValue: 5
        },
        {
          dictLabel: '检查与自评',
          dictValue: 6
        }
      ],
      searchData: {
        spwStartDate: '',
        workTypeFlag: undefined,
        progress: undefined,
        completionFlag: undefined,
        auditFailFlag: undefined,
        keyword: undefined,
        filterMyProjectFlag: undefined,
        managerType: undefined,
        managerStatus: undefined,
        managerSource: undefined,
        periodUnit: undefined,
        riskLevel: undefined,
        checkStatus: undefined,
        reviewPersonId: undefined,
        chargePersonId: undefined,
        acceptancePersonId: undefined,
        date: [],
        ticketCode: undefined,
        status: undefined,
        secondFactoryId: undefined,
        deptId: undefined,
        deptName: undefined
      },
      fieldMap: {
        1: 'completionFlag',
        2: 'completionFlag',
        3: 'auditFailFlag'
      }
    }
  },
  props: {
    id: {
      type: [Number, Array, String]
    },
    /*
     * managerType 隐患类型
     * managerStatus 状态
     * managerSource 隐患来源
     * periodUnit 排查周期
     * riskLevel 风险等级
     * checkStatus 排查状态
     * selectUser 选择人员
     * selectTime 选择时间
     */
    showArr: {
      type: Array,
      default: () => []
    }
  },
  beforeMount() {
    if (this.showArr.indexOf('spw-type') > -1) {
      this.getWorkType()
    }
  },
  methods: {
    listDeptChildren,
    showDeptPicker() {
      this.$refs.deptSelectRef.open()
    },
    onDeptChange(val) {
      this.deptCheckList = val
      this.searchData.deptId = val[0].id
      this.searchData.deptName = val[0].label
    },
    getWorkType() {
      getSpecialWorkType().then((res) => {
        this.workTypeList = res.data.map((item) => {
          return {
            dictLabel: item.categoryName,
            dictValue: item.categoryFlag
          }
        })
      })
    },
    queryRangeChange() {
      this.searchData.keyword = ''
      this.searchData.ticketCode = ''
    },
    async toggle() {
      if (this.showArr.indexOf('secondAreas') > -1) {
        let res = await getLevelTwoArea()
        console.log(res.data)
        let secondAreas = res.data.map((item) => {
          return {
            text: item.areaName,
            value: item.areaId
          }
        })
        this.secondAreas = secondAreas
      }
      if (this.show) {
        this.show = false
        this.showTime = false
        this.$refs.popup.close()
      } else {
        this.show = true
        this.$refs.popup.open()
        // 时间组件加载耗时，延迟加载
        this.$nextTick(() => {
          setTimeout(() => {
            this.showTime = true
          }, 100)
        })
      }
    },
    showApprovePicker() {
      this.$refs.approvePicker.open()
    },
    approvePickerChange(obj) {
      console.log('obj', obj)
      if (obj && obj.length) {
        this.searchData.keyword = obj[0].name
      } else {
        this.searchData.keyword = ''
      }
    },
    resetHandler() {
      this.searchData = {
        spwStartDate: '',
        workTypeFlag: undefined,
        progress: undefined,
        completionFlag: undefined,
        auditFailFlag: undefined,
        keyword: undefined,
        filterMyProjectFlag: undefined,
        managerType: undefined,
        managerStatus: undefined,
        managerSource: undefined,
        periodUnit: undefined,
        riskLevel: undefined,
        checkStatus: undefined,
        reviewPersonId: undefined,
        chargePersonId: undefined,
        acceptancePersonId: undefined,
        date: [],
        ticketCode: undefined,
        status: undefined,
        secondFactoryId: undefined,
        deptId: undefined,
        deptName: undefined
      }
    },
    submitHandler() {
      if (typeof this.searchData.progress === 'undefined') {
        this.searchData.completionFlag = undefined
        this.searchData.auditFailFlag = undefined
      } else {
        let pro = this.searchData.progress
        if (pro === 1) {
          this.searchData.completionFlag = false
          this.searchData.auditFailFlag = undefined
        } else if (pro === 2) {
          this.searchData.completionFlag = true
          this.searchData.auditFailFlag = undefined
        } else if (pro === 3) {
          this.searchData.auditFailFlag = true
          this.searchData.completionFlag = undefined
        }
      }

      if (typeof this.searchData.filterMyProjectFlag === 'undefined') {
        this.searchData.keyword = undefined
      }

      this.$emit('submit', this.searchData)
      this.toggle()
    }
  }
}
</script>

<style lang="scss" scoped>
.cu-filter-item-container {
  padding: 0rpx 30rpx;
  margin-bottom: 40rpx;

  .cu-filter-item-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    padding: 0 0 20rpx 0;
  }

  .cu-filter-item-control {
    line-height: 70rpx;
    height: 70rpx;
    background: #f8f8f8;
    border-radius: 28rpx;
    font-size: 24rpx;
    padding: 0 30rpx;
    &.placeholder {
      color: #bbbbbb;
    }
  }
}
.filter-scroll-view {
  width: 100vw;
  height: 100vh;
  display: flex;

  .filter-mask {
    flex: 1;
  }

  .scroll-view-box {
    width: 672rpx;
    background: #fff;
    box-sizing: border-box;
    height: calc(100vh - 220rpx);
    /* #ifdef APP-PLUS */
    height: calc(100vh - 140rpx);
    /* #endif */
  }

  .btn-wrap {
    background: #fff;
    display: flex;
    justify-content: space-around;
    padding-top: 30rpx;
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));

    .reset,
    .confirm {
      width: 292rpx;
      line-height: 80rpx;
      background: #ffffff;
      font-size: 32rpx;
      text-align: center;
    }

    .reset {
      color: #666666;
      background: #ffffff;
      border: 1rpx solid #cccccc;
    }

    .confirm {
      background: #2ac0c8;
      color: #fff;
    }
  }
}

.ticketCode {
  margin-bottom: 25rpx;
  // margin-top: 25rpx;
  padding: 0 15px;

  .cu-cell__item {
    margin-top: -13px;
  }

  .title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    padding: 0 0 20rpx 30rpx;
  }

  .input {
    margin-left: 35rpx;
    width: 90%;
  }
}
</style>
